<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/commons/taglibs.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>会说话的时光</title>
		<!-- meta -->
		<meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="keywords" content="时光  说话" />
		<meta name="description" content="会说话的时光"/>
		<link rel="stylesheet" href="${base}/css/bootstrap.min.css">
		<%-- <link rel="stylesheet" href="${base}/css/ionicons.min.css"> --%>
		<link rel="stylesheet" href="${base}/css/pace.css">
	    <link rel="stylesheet" href="${base}/css/custom.css">
	    <link rel="stylesheet" href="${base}/css/gh-buttons.css">
	    <link rel="stylesheet" href="${base}/css/outdiv.css">	

	    <script src="${base}/js/jquery-2.1.3.min.js"></script>
	    <script src="${base}/js/bootstrap.min.js"></script>
	    <script src="${base}/js/pace.min.js"></script>
	    <script src="${base}/js/modernizr.custom.js"></script>
	    <script src="${base}/js/script.js"></script>
	    
	</head>

	<body>
		<%@ include file="menu.jsp" %>
		
		

		<div class="content-body">
			<div class="container">
				<div class="row">
				<div >
						<div id="search-form1" class="search-form1">
							<form role="search1" method="POST" id="searchform1"  action="${ctx}/article/search" >
								<input type="search" placeholder="搜索" id="keyWord" name="keyWord">
								<a type="submit" href="#" class="overlay-close" id="searchbtn"><span>搜索</span></a>
							</form>	
										
						</div>
				</div>
					<main class="col-md-12">
					<c:forEach items="${list }" var="obj" varStatus="status">
						<article    class="post post-${status.count }">
							<header class="entry-header">
								<h1 class="entry-title">
									${obj.title }
								</h1>
								<div class="entry-meta">
									<span class="post-category"><a href="#">${obj.category }</a></span>
			
									<span class="post-date"><a href="#">${obj.updateTimeFormat }</a></span>
			
									<span class="post-author"><a href="#">${obj.author }</a></span>
			
									<span class="comments-link"><a href="#">${obj.commentcount } Comments</a></span>
								</div>
							</header>
							<div class="entry-content clearfix">
								<p class="subcontent">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									
									${obj.subContent }
								
								</p>
								
								<p class="content" style="display:none;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
								<div class="read-more cl-effect-14">
									<a href="${ctx}/article/findById?id=${obj.id }"  class="continuebtn">继续阅读 <span class="meta-nav">→</span></a>
									<a href="javascript:void(0);"  class="commentbtn">我要评论 <span class="meta-nav">→</span></a>
								</div>
							</div>
						</article>
					</c:forEach>
					</main>
				
				</div>
			</div>
		</div>
		<!--弹出层时背景层DIV-->
		<div id="back" class="black_overlay">
		</div>
		<div id="mydiv" class="white_content">
			<div style="text-align: right; cursor: default; height: 40px;">
			<span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
			</div>
		</div>
		
		<%@ include file="foot.jsp" %>

		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close"><span class="ion-ios-close-empty"></span></button>
			<nav>
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="full-width.html">文章</a></li>
					<li><a href="about.html">我</a></li>
					<li><a href="contact.html">联系me</a></li>
				</ul>
			</nav>
		</div>
	</body>
	
<script type="text/javascript">
	
	$(".commentbtn").click(function(){
	   alert("亲，你真的要评论么？");
		
	});
	
	//关闭弹出层
	function CloseDiv(show_div,bg_div)
	{
		$("#MyDiv").css("display","none");
		$("#fade").css("display","none");
	};
	
	 $("#searchbtn").click(function(){
	  	console.log($("#keyWord").val());
		if($("#keyWord").val()==''){
			alert("请先输入要搜索的内容！");
		}else{
				$.ajax({
				    url:'${base}/article/search',
					cache: false,
		            type: "POST",
		            data:$('#searchform1').serialize(),// 你的formid
		            async: false,
		            error: function(request) {
		                alert("Connection error");
		            },
		            success: function(data) {
		            	console.log(data);
		            	//将字符串转成json对象
		            	var obj = eval('('+data+')');
		            	console.log(obj);
		            	//遍历传过来的数据，病将其显示到页面
		            	var htmlstr = '';
		            	for(var i in obj){
		            		
		            		htmlstr = htmlstr + "<article class='post post-"+i+"'>";
		            		htmlstr = htmlstr + "<header class='entry-header'><h1 class='entry-title'>";
		            		htmlstr = htmlstr + obj[i].title;
		            		htmlstr = htmlstr + "</h1><div class='entry-meta'>";
		            		htmlstr = htmlstr + "<span class='post-category'><a href='#'>"+obj[i].category+"</a></span>";
		            		htmlstr = htmlstr + "<span class='post-date'><a href='#'>"+obj[i].updateTimeFormat+"</a></span>";
		            		htmlstr = htmlstr + "<span class='post-author'><a href='#'>"+obj[i].author+"</a></span>";
		            		htmlstr = htmlstr + "<span class='comments-link'><a href='#'>"+obj[i].commentcount+"Comments</a></span>";
		            		htmlstr = htmlstr + "</header><div class='entry-content clearfix'><p class='subcontent'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
		            		htmlstr = htmlstr + obj[i].subContent;
		            		htmlstr = htmlstr + "</p><p class='content' style='display:none;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>";
		            		htmlstr = htmlstr + "<div class='read-more cl-effect-14'><a href='${ctx}/article/findById?id="+obj[i].id+"'  class='continuebtn'>继续阅读 <span class='meta-nav'>→</span></a>";
		            		htmlstr = htmlstr + "<a href='javascript:void(0);'  class='commentbtn'>我要评论 <span class='meta-nav'>→</span></a></div></div>";
		            		
		            	}
		            	$(".col-md-12").html(htmlstr);
		            	/* for(var i=0,length=data.length;i<length;i++){
		            		for(var key in data[i]){
								console.log(key+":"+data[i][key]);		            			
		            		}
		            	} 
		            	遍历map
		            	$.each(exMap,function(key,value){ 
								Console.wiite("key:"+key+";value:"+value); 
						}); 
		            	*/
		            }
				})
		} 
	}) 

</script>

</html>
